<template>
	<div class="btnManager btnManagerBottom w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>按钮管理</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listOne" @click="openWrap()">新增按钮</a>
			</div>
			<el-table ref="multipleTable" :data="tableData" border>
				<el-table-column label="排序" width="120">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="name" label="按钮名称"></el-table-column>
				<el-table-column prop="code" label="权限标识"></el-table-column>
				<el-table-column prop="description" label="备注"></el-table-column>
				<el-table-column label="操作" width="160">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--添加按钮弹窗-->
		<div class="btnGuanliWrap" v-show="btnWrapShow">
			<p>{{btnText}}</p>
			<div class="menuLine">
				<em>按钮名称：</em>
				<input type="text" v-model="btnName"/>
			</div>
			<div class="menuLine">
				<em>备注：</em>
				<input type="text" v-model="btnWarn"/>
			</div>
			<div class="menuLine">
				<em>权限标识：</em>
				<input type="text" v-model="btnQx"/>
			</div>
			<div class="menuLine textarea">
				<em>API代码：</em>
				<input type="text" v-model="btnAPI"/>
			</div>
			<div class="menuLine">
				<a @click="submit">保存</a>
				<a @click="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				tableData:[],
				nowType:'add',
				menuLevel:'',
				menuId:'',//从菜单管理传递的id
				sort:'',//列表排序
//				弹窗数据
				btnWrapShow:false,
				btnText:'新增按钮',
				btnName:'',
				btnWarn:'',
				btnQx:'',
				btnAPI:''
			}
		},
		methods:{
			//取到路由带过来的参数
			getParams() {
				this.menuId = this.$route.params.id;
				this.menuLevel = this.$route.params.level;
				console.log('携带的id以及级别：',this.menuId,this.menuLevel)
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/sys/selectPermissionPointList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {id:this.menuId},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			openWrap(){
				this.btnWrapShow = true;
			},
			addButton(){
				let that = this;
				let levelAdd = this.menuLevel;
				let s = {
					pid:that.menuId,
					name:that.btnName,
					description:that.btnWarn,
					code:that.btnQx,
					apiUrl:that.btnAPI,
					type:2,
					level:levelAdd+1
				}
				this.$ajax({
					url: this.$root.jifuUrl + "/sys/addPermissionPoint",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: s,
					success: res => {
						if(res.data.code == 200) {
							this.btnWrapShow = false;
							that.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							that.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			updateButton(){
				let that = this;
				let levelAdd = this.menuLevel;
				let s = {
					id:that.id,
					pid:that.menuId,
					name:that.btnName,
					description:that.btnWarn,
					code:that.btnQx,
					apiUrl:that.btnAPI,
					type:2,
					level:levelAdd+1
				}
				this.$ajax({
					url: this.$root.jifuUrl + "/sys/updatePermissionPoint",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data: s,
					success: res => {
						if(res.data.code == 200) {
							this.btnWrapShow = false;
							that.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							that.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleEdit(row){
				this.$ajax({
					url: this.$root.jifuUrl + "/sys/selectPermissionPoint",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {id:row.id},
					success: res => {
						if(res.data.code == 200) {
							this.btnWrapShow = true;
							this.btnText = '编辑按钮';
							var replace = res.data.data;
							this.id = replace.id;
							this.btnName = replace.name;
							this.btnWarn = replace.description;
							this.btnQx = replace.code;
							this.btnAPI = replace.apiUrl;
							this.nowType = 'edit';
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();	
						}
					}
				});
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit(){
				this.$ajax({
				 	url: this.$root.jifuUrl + "/sys/deletePermissionPoint",
				 	headers:{'ContentType': 'application/json; charset=utf-8'},
				 	method: 'DELETE',
				 	data: {id:this.transitionRow.id},
				 	success: res => {
				 		if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
				 	}
				});
			},
			submit(){
				let that = this;
				if(that.nowType == 'add') {
					that.addButton();
				}else if(that.nowType == 'edit') {
					that.updateButton();
				}
			},
			cancel(){
				this.btnWrapShow = false;
				this.btnName = '';
				this.btnWarn = '';
				this.btnQx = '';
				this.btnAPI = '';
				this.nowType = 'add';
				this.btnText="新增按钮"
			},
			reBack(){
				this.$router.go(-1);
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getParams();
			if(this.menuId==null||this.menuLevel==null){
				this.$store.commit('GET_MENUID');
				var s =this.$store.state.menuTransitionId;
				this.menuId=s.menuId;
				this.menuLevel = s.menuLevel
			}
			this.getTableList();
			window.addEventListener("beforeunload",()=>{
				s={
					menuId : this.menuId,
					menuLevel : this.menuLevel
				}	
				this.$store.commit('SET_MENUID', s);
			});
		}
	}
</script>

<style>
	.btnGuanliWrap {width:468px;height:280px;position: fixed;top: 50%;left: 50%;margin-top: -140px;margin-left: -234px;z-index: 999;border:1px solid #ccc;background: #fff;}
	.btnGuanliWrap p{margin: 10px 0 0 20px;color: #000;}
	.btnGuanliWrap .menuLine{width:100%;height:auto;padding:10px 0 0 40px;box-sizing: border-box;}
	.btnGuanliWrap .menuLine em{width: 113px;text-align: right;color: #333;display: inline-block;font-style: normal;}
	.btnGuanliWrap .menuLine input{width: 185px;height: 30px;line-height:30px;display: inline-block;font-size: 14px;color: #333;border: 1px solid #ccc;border-radius: 5px;padding-left: 15px;}
	.btnGuanliWrap a{background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;color:#fff;cursor: pointer;text-align: center;font-size: 14px;border-radius: 5px;margin-left: 65px;margin-top: 10px;}
	.btnGuanliWrap a:nth-child(2){background:#ccc;margin-left:50px;}
</style>